<template>
  <div>
    <!-- 添加或修改实验室测评对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="640px" append-to-body>
      <el-tabs v-model="activeName">
        <el-tab-pane label="测评要素" name="first"></el-tab-pane>
        <el-tab-pane label="流程签批" name="second">
          <TaskApproval ref="task" :instanceId="form.instanceId"></TaskApproval>
        </el-tab-pane>
      </el-tabs>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-if="activeName=='first'">
      <el-form-item label="测评创建" prop="createTime">
        {{form.createTime}}<span style="margin-left: 20px;">由&nbsp;{{form.createBy}}&nbsp;创建&nbsp;&nbsp;</span>
        <div style="float:right" v-if="form.flowStatusOpt=='finished'">
          <el-button type="text" @click="exporScore(form.instanceId)">下载人员评分</el-button>
        </div>
      </el-form-item>
        <el-form-item label="测评名称">
         {{form.evalutionName}}
        </el-form-item>
       <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="测评开始期间">
              {{form.durationBegin}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测评结束期间">
             {{form.durationEnd}}
            </el-form-item>
          </el-col>
        </el-row> -->
       <el-row>
         <el-col :span="12">
           <el-form-item label="测评开始时间" >
            {{form.evalutionStart}}
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="测评结束时间">
            {{form.evalutionEnd}}
           </el-form-item>
         </el-col>
       </el-row>
      <!-- <el-row>
         <el-col :span="12">
           <el-form-item label="述职开始时间">
           {{form.reportStart}}
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="述职结束时间">
           {{form.reportEnd}}
           </el-form-item>
         </el-col>
       </el-row> -->
       <el-form-item label="测评对象">
         {{targetList}}
       </el-form-item>
       <el-form-item label="测评用户">
        {{userList}}
       </el-form-item>
       <el-form-item label="测评方案">
        <UploadCom ref="upload" disabled :userFileList="fileList"
          class="form_long" />
       </el-form-item>
       <el-form-item label="备注说明" >
         {{form.mark}}
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLabEvalution, exportLabEvalution} from "@/api/evalution/labEvalution";
import UploadCom from "@/views/labdata/commons/upload.vue";
import TaskApproval from '@/views/labdata/flowTask/task_approval.vue';
import TargetUser from "@/views/evalution/target_user";
export default {
  name: "EvalutionDetail",
  components: {
    UploadCom,
    TaskApproval
  },
  data() {
    return {
      activeName:'first',
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      //附件集合
      fileList: [],
      targetList:'',
      userList:'',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  watch:{
    'form.userList':function(val){
      this.userList = '';
      if(val)
      val.forEach((item, index) => {
        if (index > 0) {
          this.userList += ",";
        }
        this.userList += item.nickName;
      })
    },
    'form.targetList':function(val){
      this.targetList = '';
      if(val)
      val.forEach((item, index) => {
        if (index > 0) {
          this.targetList += ",";
        }
        this.targetList += item.nickName;
      })
    },
  },
  created() {
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
      };
      this.userList = '';
      this.targetList = '';
      this.fileList = [];
      this.resetForm("form");
    },
    exporScore(instanceId){
      this.$confirm('要下载本次评测分数文件?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportLabEvalution({instanceId:instanceId});
          }).then(response => {
            this.download(response.msg);
          })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const instanceId = row.instanceId || this.ids
      getLabEvalution(instanceId).then(response => {
        this.form = response.data;
        this.fileList = this.form.images;
        this.open = true;
        this.title = "实验室测评明细";
      });
    },
  }
};
</script>
<style type="text/css" scoped lang="scss">
  .form_long {
    width: 530px;
  }
 /deep/ .uploadCss .el-upload {
    display: none !important;
  }

 /deep/ .el-form-item {
    margin-bottom: 5px;
  }
/deep/ .el-upload-list__item-name {
  margin-top: -40px;
}
  .form_short {
    width: 200px;
  }
  .purchase_s_view {
    display: flex;
    flex-direction: row;
  }
  /deep/.el-dialog__body {
      padding: 0px 20px;
  }
</style>
